<template>
  <view>
    <!-- 头部 -->
    <yHeader
      :current="2"
      :screenWidth="screenWidth"
      @Tabs="handleTabs"
    ></yHeader>
    <!-- PC内容 -->
    <view v-if="screenWidth > 480" class="bg-grey py-4">
      <view class="__inner">
        <el-skeleton :loading="form.Picture_URL == void 0" :rows="20" animated>
          <!-- 商品信息 -->
          <view class="bg-white flex w-100">
            <view class="m-4 flex" style="width: 100%">
              <!-- 图 -->
              <view class="flex-shrink" style="width: 800rpx">
                <!-- 主图 -->
                <view style="width: 800rpx; height: 800rpx">
                  <image
                    style="width: 100%; height: 100%"
                    :src="
                      Swiper.length > 0
                        ? Domain_IMG + Swiper[picNum].Picture_URL
                        : Domain_IMG + form.Picture_URL
                    "
                    mode=""
                  ></image>
                </view>
                <!-- 轮播展示 -->
                <view
                  class="flex mt-2"
                  style="
                    width: 800rpx;
                    height: 144rpx;
                    justify-content: space-around;
                  "
                >
                  <view
                    @click="handleSwiper(i)"
                    v-for="(item, i) in Swiper"
                    :key="i"
                    :class="
                      picNum == i ? 'border-button border-' + ThemeColors : ''
                    "
                    style="cursor: pointer; width: 144rpx; height: 144rpx"
                  >
                    <image
                      style="width: 100%; height: 100%"
                      :src="Domain_IMG + item.Picture_URL"
                      mode=""
                    >
                    </image>
                  </view>
                </view>
              </view>
              <!-- 详情 -->
              <view class="ml-4" style="width: 100%">
                <view
                  class="border-bottom box border-grey"
                  style="height: 200rpx"
                >
                  <view class="flex align-end" style="height: 50%">
                    <text class="h3 font-weight-bold"
                      >【{{ form.Category_Name }}】{{
                        form.Group_Purchasing_Name
                      }}</text
                    >
                  </view>
                  <view
                    class="flex justify-between align-center"
                    style="height: 50%"
                  >
                    <text class="font text-dark">{{ form.Article_Name }}</text>
                  </view>
                </view>
                <view class="" style="width: 100%">
                  <view class="flex" style="height: 150rpx">
                    <view
                      class="flex-shrink flex align-center"
                      style="width: 15%; height: 100%"
                    >
                      <text class="font text-dark">价格</text>
                    </view>
                    <view
                      class="flex align-center"
                      style="width: 85%; height: 100%"
                    >
                      <text class="h2" :class="'text-' + ThemeColors"
                        >{{ form.Amount + ".00" }}元</text
                      >
                    </view>
                  </view>
                  <view class="flex" style="height: 70rpx">
                    <view
                      class="flex-shrink flex align-center"
                      style="width: 15%; height: 100%"
                    >
                      <text class="font text-dark">起批量</text>
                    </view>
                    <view
                      class="flex align-center"
                      style="width: 85%; height: 100%"
                    >
                      <text class="font"
                        >{{ form.Starting_Quantity }}{{ form.Unit }}起批</text
                      >
                    </view>
                  </view>
                  <view class="flex" style="height: 70rpx">
                    <view
                      class="flex-shrink flex align-center"
                      style="width: 15%; height: 100%"
                    >
                      <text class="font text-dark">采购热度</text>
                    </view>
                    <view
                      class="flex align-center"
                      style="width: 85%; height: 100%"
                    >
                      <text class="font"
                        >已售出{{ form.Sell_Quantity }}{{ form.Unit }}</text
                      >
                    </view>
                  </view>
                  <view class="flex" style="height: 70rpx">
                    <view
                      class="flex-shrink flex align-center"
                      style="width: 15%; height: 100%"
                    >
                      <text class="font text-dark">浏览次数</text>
                    </view>
                    <view
                      class="flex align-center"
                      style="width: 85%; height: 100%"
                    >
                      <text class="font">{{ Data.Browsing }}次</text>
                    </view>
                  </view>
                  <view class="flex mb-4" style="height: 70rpx">
                    <view
                      class="flex-shrink flex align-center"
                      style="width: 15%; height: 100%"
                    >
                      <text class="font text-dark">规格</text>
                    </view>
                    <view
                      class="flex justify-between align-center border-bottom box border-grey"
                      style="
                        border-bottom-style: dashed;
                        width: 85%;
                        height: 100%;
                      "
                    >
                      <text class="font">默认</text>
                      <view class="flex justify-between" style="width: 30%">
                        <text class="font"
                          >{{ form.Amount }}元/{{ form.Unit }}</text
                        >
                        <text class="font"
                          >{{ form.Starting_Quantity }}{{ form.Unit }}起批</text
                        >
                      </view>
                    </view>
                  </view>
                  <view class="flex mb-4" style="height: 80rpx">
                    <view
                      class="flex-shrink flex align-center"
                      style="width: 15%; height: 100%"
                    >
                      <text class="font text-dark">购买数量</text>
                    </view>
                    <view
                      class="flex align-center"
                      style="width: 85%; height: 100%"
                    >
                      <el-input-number
                        :disabled="Number(form.Residue_Quantity) == 0"
                        v-model="Quantity"
                        style="width: 300rpx"
                        :min="Number(form.Starting_Quantity)"
                        :step="Number(form.Starting_Quantity)"
                        :max="Number(form.Residue_Quantity)"
                      ></el-input-number>
                      <text class="h2 ml-10" :class="'text-' + ThemeColors"
                        >{{ Quantity * form.Amount }}.00元</text
                      >
                    </view>
                  </view>
                </view>
                <view class="" style="height: 400rpx">
                  <!-- 按钮 -->
                  <view
                    v-if="
                      form.Enterprise_Info_SerialNumber !=
                      Enterprise_Info_SerialNumber
                    "
                    class="flex mb-4"
                    style="height: 80rpx"
                  >
                    <view
                      class="flex-shrink"
                      style="width: 15%; height: 100%"
                    ></view>
                    <view
                      class="flex align-center"
                      style="width: 85%; height: 100%"
                    >
                      <view
                        v-if="Number(form.Residue_Quantity) > 0"
                        @click="handleOrder()"
                        class="flex justify-center align-center mr-4"
                        :class="'bg-' + ThemeColors"
                        style="cursor: pointer; width: 350rpx; height: 100%"
                      >
                        <text class="font-md text-white">立即购买</text>
                      </view>
                      <view
                        v-else
                        class="flex justify-center align-center mr-4"
                        :class="'bg-danger'"
                        style="cursor: pointer; width: 350rpx; height: 100%"
                      >
                        <text class="font-md text-white">已售空</text>
                      </view>
                      <view
                        @click="handleServer(true)"
                        class="border box flex justify-center align-center"
                        :class="
                          'border-' + ThemeColors + ' text-' + ThemeColors
                        "
                        style="
                          cursor: pointer;
                          border-width: 5rpx;
                          width: 350rpx;
                          height: 100%;
                        "
                      >
                        <text class="font-md">联系卖家</text>
                      </view>
                    </view>
                  </view>
                  <!-- 按钮 -->
                  <view v-else class="flex mb-4" style="height: 80rpx">
                    <view
                      class="flex-shrink"
                      style="width: 15%; height: 100%"
                    ></view>
                    <view
                      class="flex align-center"
                      style="width: 85%; height: 100%"
                    >
                      <view
                        class="flex justify-center align-center mr-4"
                        :class="'bg-' + ThemeColors"
                        style="cursor: pointer; width: 350rpx; height: 100%"
                      >
                        <text class="font-md text-white">本企发布</text>
                      </view>
                    </view>
                  </view>
                  <!-- 详情 -->
                  <view class="flex" style="height: 70rpx">
                    <view
                      class="flex-shrink"
                      style="width: 15%; height: 100%"
                    ></view>
                    <view
                      class="flex align-center flex"
                      style="width: 85%; height: 100%"
                    >
                      <view class="mr-4">
                        <text class="font text-muted">装运方式</text>
                      </view>
                      <view
                        v-for="(item, index) in Shipment"
                        :key="item.Shipment_SerialNumber"
                        class="mr-4"
                      >
                        <text class="font text-dark">{{
                          item.Shipment_Name
                        }}</text>
                      </view>
                    </view>
                  </view>
                  <view class="flex" style="height: 70rpx">
                    <view
                      class="flex-shrink"
                      style="width: 15%; height: 100%"
                    ></view>
                    <view
                      class="flex align-center flex"
                      style="width: 85%; height: 100%"
                    >
                      <view class="mr-4">
                        <text class="font text-muted">支付方式</text>
                      </view>
                      <view
                        v-for="(item, index) in Payment"
                        :key="index.Payment_SerialNumber"
                        class="mr-4"
                      >
                        <text class="font text-dark">{{
                          item.Payment_Name
                        }}</text>
                      </view>
                    </view>
                  </view>
                  <view class="flex" style="height: 70rpx">
                    <view
                      class="flex-shrink"
                      style="width: 15%; height: 100%"
                    ></view>
                    <view
                      class="flex align-center flex"
                      style="width: 85%; height: 100%"
                    >
                      <view class="mr-4">
                        <text class="font text-muted">交易方式</text>
                      </view>
                      <view
                        v-for="(item, index) in ['担保交易']"
                        :key="index"
                        class="mr-4"
                      >
                        <text class="font text-dark">{{ item }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 详细信息 -->
          <view class="flex mt-4 w-100">
            <!-- 左 -->
            <view class="flex-shrink" style="width: 400rpx">
              <!-- 店铺信息 -->
              <view class="flex bg-white mb-4 w-100 py-4" style="">
                <view class="mx-4 w-100" style="height: 100%">
                  <!-- logo -->
                  <view class="flex justify-center align-center">
                    <view class="" style="width: 150rpx; height: 150rpx">
                      <image
                        v-if="form.Enterprise_Logo != void 0"
                        class="rounded-circle"
                        style="width: 100%; height: 100%"
                        :src="Domain_Business + form.Enterprise_Logo"
                        mode=""
                      ></image>
                    </view>
                  </view>
                  <!-- 企业名称 -->
                  <view class="my-4 flex align-center">
                    <view
                      class="flex justify-center"
                      style="width: 100%; height: 100%"
                    >
                      <text class="font text-center font-weight-bold">{{
                        form.Enterprise_Name
                      }}</text>
                    </view>
                  </view>
                  <!-- <view class="mb-4 flex align-center">
									<view class="flex " style="width: 100%; height: 100%;">
										<text class="font">主营类目：木耳</text>
									</view>
								</view>
								<view class="mb-4 flex align-center">
									<view class="flex " style="width: 100%; height: 100%;">
										<text class="font">所在地区：黑龙江省哈尔滨市香坊区</text>
									</view>
								</view> -->
                  <!-- 按钮 -->
                  <view
                    v-if="
                      form.Enterprise_Info_SerialNumber !=
                      Enterprise_Info_SerialNumber
                    "
                    @click="handleServer(true)"
                    class="mb-2 border box flex justify-center align-center"
                    :class="'border-' + ThemeColors + ' text-' + ThemeColors"
                    style="
                      cursor: pointer;
                      border-width: 5rpx;
                      width: 100%;
                      height: 70rpx;
                    "
                  >
                    <text class="font">联系对方</text>
                  </view>
                  <view
                    @click="handleDetail(form)"
                    class="mb-4 flex justify-center align-center"
                    :class="'bg-' + ThemeColors"
                    style="cursor: pointer; width: 100%; height: 70rpx"
                  >
                    <text class="font text-white">溯源查看</text>
                  </view>
                </view>
              </view>
            </view>
            <!-- 右 -->
            <view class="bg-white ml-4" style="width: 100%">
              <!-- 表头 -->
              <view
                class="flex border-bottom border-grey"
                style="height: 100rpx"
              >
                <view
                  @click="ChangeTabs(index)"
                  v-for="(item, index) in tabs"
                  :key="index"
                  class="border-top box flex justify-center align-center"
                  :class="
                    item.isClick ? 'border-' + ThemeColors : 'border-white'
                  "
                  style="cursor: pointer; border-top-width: 5rpx; width: 250rpx"
                >
                  <text
                    class="font"
                    :class="item.isClick ? 'text-' + ThemeColors : ''"
                    >{{ item.value }}</text
                  >
                </view>
              </view>
              <!-- 类别 -->
              <!-- <view v-if="tabNum==0" class="flex">
							<view class="flex flex-wrap mx-10 py-4 border-bottom border-grey w-100"
								style="height: 100%;">
								<view v-for="(value,key) in {'货品状态':'带包','颜色':'黑','类别':'木耳','品种名':'秋木耳'}" :key="key"
									class="bl-blue flex align-center " style="width:33.3%; height: 100rpx;">
									<view class="" style="width: 30%;">
										<text class="font">{{key}}</text>
									</view>
									<view class="" style="width: 70%;">
										<text class="font">{{value}}</text>
									</view>
								</view>
							</view>
						</view> -->
              <!-- 详情图 -->
              <view v-if="tabNum == 0" class="flex">
                <view
                  class="flex flex-column mx-10 py-4 w-100"
                  style="height: 100%"
                >
                  <view
                    v-for="item in Detail"
                    :key="item.Article_PicNumber"
                    style="width: 100%"
                  >
                    <image
                      style="width: 100%"
                      :src="Domain_IMG + item.Picture_URL"
                      mode="widthFix"
                    >
                    </image>
                  </view>
                </view>
              </view>
              <!-- 在线成交 -->
              <view
                v-if="tabNum == 0 || tabNum == 1"
                class="w-100 py-4 flex"
                style="height: 1000rpx"
              >
                <view class="flex flex-column mx-4 w-100" style="height: 100%">
                  <!-- 表头 -->
                  <view
                    class="flex-shrink flex w-100 border-bottom box border-grey"
                    style="height: 100rpx"
                  >
                    <view class="flex align-center" style="width: 20%">
                      <text class="font">采购商</text>
                    </view>
                    <view class="flex align-center" style="width: 30%">
                      <text class="font">货品规格</text>
                    </view>
                    <view
                      class="flex align-center justify-end"
                      style="width: 30%"
                    >
                      <text class="font">采购量</text>
                    </view>
                    <view
                      class="flex align-center justify-end"
                      style="width: 20%"
                    >
                      <text class="font">成交时间</text>
                    </view>
                  </view>
                  <!-- 表体 -->
                  <view class="flex flex-column w-100" style="height: 100%">
                    <view
                      v-for="(item, index) in Online_transaction_list"
                      :key="index"
                      class="flex w-100 mt-2"
                      style="height: 10%"
                    >
                      <view class="flex align-center" style="width: 20%">
                        <text class="font">{{
                          item.Buyer_Contact.substr(0, 1) +
                          "*".repeat(item.Buyer_Contact.length - 1)
                        }}</text>
                      </view>
                      <view class="flex align-center" style="width: 30%">
                        <text class="font">{{ item.Enterprise_Name }}</text>
                      </view>
                      <view
                        class="flex align-center justify-end"
                        style="width: 30%"
                      >
                        <text class="font"
                          >{{ item.Total_Quantity }}{{ item.Unit }}</text
                        >
                      </view>
                      <view
                        class="flex align-center justify-end"
                        style="width: 20%"
                      >
                        <text class="font">{{ item.Submission_Time }}</text>
                      </view>
                    </view>
                  </view>
                  <!-- 分页器 -->
                  <view
                    class="flex-shrink flex justify-end w-100"
                    style="height: 100rpx"
                  >
                    <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="zx_cj.page"
                      :page-sizes="[1, 10, 15, 20]"
                      :page-size="zx_cj.limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="limit"
                    >
                    </el-pagination>
                  </view>
                </view>
              </view>
              <view v-if="tabNum == 2" class="flex">
                <view
                  class="flex flex-column mx-10 py-4 w-100"
                  style="height: 100%"
                >
                  <TransactionDescription></TransactionDescription>
                </view>
              </view>
            </view>
          </view>
        </el-skeleton>
      </view>
    </view>
    <!-- 移动端内容 -->
    <view v-else-if="screenWidth <= 480" class="bg-grey pb-2">
      <!-- 轮播图 -->
      <view class="mb-2" style="position: relative">
        <swiper
          id="swiper"
          :autoplay="true"
          :interval="3000"
          :duration="500"
          circular
          style="height: 700rpx;}"
          @change="changeIndicatorDots"
        >
          <swiper-item v-for="item in Swiper" :key="item.Article_PicNumber">
            <image
              :src="Domain_IMG + item.Picture_URL"
              mode="sapectFill"
              style="width: 100%; height: 700rpx"
            ></image>
          </swiper-item>
        </swiper>
        <text
          class="font-sm px-2 text-white current"
          style="border-radius: 100rpx"
          >{{ current }}</text
        >
      </view>
      <view class="bg-white rounded-lg mx-2 py-2 mb-2">
        <view class="mx-2">
          <text class="font" :class="'text-' + ThemeColors">￥</text>
          <text class="h2" :class="'text-' + ThemeColors">{{
            form.Amount
          }}</text>
          <text class="font mx-4"
            >{{ form.Starting_Quantity }}{{ form.Unit }}起批</text
          >
        </view>
        <view class="mx-2 mb-2">
          <text class="font font-weight-bold">{{ form.Article_Name }}</text>
        </view>
        <view class="mx-2 border-top border-grey">
          <text class="font-sm text-muted"
            >已售出{{ form.Sell_Quantity }}{{ form.Unit }}</text
          >
        </view>
      </view>
      <!-- 发货地址 -->
      <view class="bg-white rounded-lg mx-2 py-2">
        <view class="mx-2">
          <text class="font" :class="'text-' + ThemeColors">￥</text>
          <text class="h2" :class="'text-' + ThemeColors">{{
            form.Amount
          }}</text>
          <text class="font mx-4">{{ form.Amount }}</text>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <yFooter :screenWidth="screenWidth"></yFooter>
    <view
      v-if="isServer"
      class="flex flex-column serve-mask bg-white shadow border position-relative"
      :class="'border-' + ThemeColors"
    >
      <view
        class="flex-shrink shadow flex align-center border-bottom border-grey"
        style="height: 80rpx"
      >
        <text
          class="px-2 font font-weight-bold border-left"
          :class="'border-' + ThemeColors"
          style="border-left-width: 8rpx"
          >企业名称</text
        >
        <text
          @click="handleServer(false)"
          class="font-sm text-muted"
          style="cursor: pointer; position: absolute; right: 20rpx"
          >关闭</text
        >
      </view>
      <view class="flex flex-column mb-4" style="height: 100%">
        <view class="w-100" style="height: 100%">
          <scroll-view
            :scroll-top="scrollTop"
            :scroll-with-animation="true"
            :scroll-y="true"
            id="msglistview"
            class="scroll-view"
            style="height: 100%; overflow-y: scroll"
          >
            <view class="chat-body">
              <view v-for="(item_, index) in msgList" :key="index">
                <view
                  class="item self flex align-center"
                  v-if="item_.userContent != ''"
                >
                  <view class="text-center">
                    <text class="font-small">{{ item_.time }}</text>
                    <view class="content right">{{ item_.userContent }}</view>
                  </view>
                  <view class="flex flex-column align-center">
                    <image
                      mode="widthFix"
                      style="width: 70rpx"
                      class="avatar"
                      src="../../static/icon/1.png"
                    >
                    </image>
                  </view>
                </view>
                <view class="item Ai" v-if="item_.botContent != ''">
                  <view class="flex flex-column align-center">
                    <image
                      mode="widthFix"
                      style="width: 70rpx"
                      class="avatar"
                      src="../../static/icon/1.png"
                    >
                    </image>
                  </view>
                  <view class="flex flex-column align-center ml-3">
                    <text class="font-small">{{ item_.time }}</text>
                    <view class="content left">
                      {{ item_.botContent }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <view
        class="shadow flex-shrink flex align-center bg-lightbrown w-100 border-top border-grey"
        style="height: 90rpx; position: absolute; bottom: -90rpx"
      >
        <textarea
          v-model="chatMsg"
          class="px-2 py-1 w-100"
          style="height: 100%"
          placeholder-class="font text-hover-light"
          placeholder="请输入您要说的话"
        ></textarea>
        <view
          @click="handleSend()"
          class="hover mr-2 flex-shrink rounded-lg flex align-center justify-center"
          :class="'bg-' + ThemeColors"
          style="width: 100rpx; height: 80%"
        >
          <text class="font text-white">发送</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import yHeader from "@/components/yHeader.vue";
import yFooter from "@/components/yFooter.vue";
import TransactionDescription from "@/components/TransactionDescription.vue";
import times from "@/static/js/utils.js";
import { getGroupTransactionAll } from "@/api/purchasedgoods.js";
import { Message } from "element-ui";
import { GroupProcureID, GroupServesHistory } from "@/api/group.js";
import { GoodsFileAdd, getAddAction } from "@/api/global.js";
export default {
  components: {
    yHeader,
    yFooter,
    TransactionDescription,
  },
  data() {
    return {
      scrollTop: 0,
      usePhone: "",
      is_open_socket: false, // 确保websocket是打开状态
      hearBeatInterval: null, //心跳
      msgList: [],
      screenWidth: uni.getSystemInfoSync().windowWidth,
      ThemeColors: app.globalData.ThemeColors,
      Domain_IMG: app.globalData.Domain_IMG,
      Domain_Business: app.globalData.Domain_Business,
      Enterprise_Info_SerialNumber: "",
      current: "1/5",
      tabNum: 0,
      Quantity: 0,
      isServer: false,
      chatMsg: "",
      tabs: [
        {
          value: "商品详情",
          isClick: true,
        },
        {
          value: "在线成交",
          isClick: false,
        },
        {
          value: "交易说明",
          isClick: false,
        },
      ],
      form: {},
      zx_cj: {
        Type: "1",
        page: 1,
        limit: 1,
        Enterprise_Info_SerialNumber: "",
        Group_Purchasing_SerialNumber: "",
      },
      limit: 0,
      Online_transaction_list: [],
      Show: true,
      Data: {},
      Detail: [],
      Swiper: [],
      Payment: [],
      Shipment: [],
      BrowseHistory: {
        Group_Browse_SerialNumber: "",
        Group_SerialNumber: "",
        Group_Browse_Path: "",
        Group_Type: "1",
        Group_Browse_Date: times.nowtime(),
        User_Number: "",
      },
      picNum: 0,
    };
  },
  onLoad(options) {
    this.usePhone = uni.getStorageSync("loginInfo").use;
    this.zx_cj.Enterprise_Info_SerialNumber = options.enterprise;
    this.zx_cj.Group_Purchasing_SerialNumber = options.id;
    this.Enterprise_Info_SerialNumber =
      uni.getStorageSync("loginInfo").enterprise;
    this.getGroupTransactionAllmethod(this.zx_cj);
    this.getData(options.id);
    this.BrowseHistory.User_Number = uni.getStorageSync("loginInfo").use;
    this.BrowseHistory.Group_SerialNumber = options.id;
    this.BrowseHistory.Group_Browse_Path = window.location.hash;
    console.log(this.BrowseHistory);
    this.getAddHistory();
  },
  onUnload() {
    this.closeSocket();
  },
  destroyed() {
    this.closeSocket();
  },
  unmounted() {
    this.closeSocket();
  },
  beforeDestroy() {
    this.closeSocket();
  },
  onHide() {
    this.closeSocket();
  },
  methods: {
    async getAddHistory() {
      let data = {
        Data: JSON.stringify({
          group_browsing_info: [this.BrowseHistory],
        }),
      };
      const res = await getAddAction({
        data,
      });
      // if (res.redirect && res.redirect == 'REDIRECT') {
      // 	Message({
      // 		message: '登录超时,请重新登录',
      // 		type: 'error'
      // 	})
      // 	setTimeout(function() {
      // 		uni.navigateTo({
      // 			url: "/pages/login/login"
      // 		});
      // 	}, 2000);
      // }
      // console.log(res)
    },
    closeSocket() {
      if (this.is_open_socket) {
        this.socketTask.close();
        clearInterval(this.hearBeatInterval);
      }
    },
    async getGroupTransactionAllmethod(form) {
      const res = await getGroupTransactionAll({
        data: form,
      });
      this.limit = parseInt(res.limit);
      this.Online_transaction_list = res.tableData;
    },
    handleCurrentChange(val) {
      this.zx_cj.page = val;
      this.getGroupTransactionAllmethod(this.zx_cj);
    },
    handleSizeChange(val) {
      this.zx_cj.limit = val;
      this.getGroupTransactionAllmethod(this.zx_cj);
    },
    changeIndicatorDots(e) {
      //每次轮播修改轮播图数--1/4
      this.current = e.detail.current + 1 + "/" + this.Swiper.length;
    },
    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    handleDetail(row) {
      //溯源查看
      uni.navigateTo({
        url:
          "/pages/detail/enterprise-detail?id=" +
          row.Enterprise_Info_SerialNumber,
      });
    },
    handleSwiper(i) {
      this.picNum = i;
    },
    async getData(Group_Purchasing_SerialNumber) {
      const res = await GroupProcureID({
        data: {
          Group_Purchasing_SerialNumber,
        },
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        console.log(res.redirect);
      } else if (res.Status == "success") {
        this.form = res.Data;
        this.Data = res;
        if (
          parseInt(res.Data.Starting_Quantity) <
          parseInt(res.Data.Residue_Quantity)
        ) {
          this.Quantity = res.Data.Starting_Quantity;
        } else {
          this.Quantity = res.Data.Residue_Quantity;
        }
        this.Swiper = res.Swiper;
        this.Detail = res.Detail;
        this.Payment = res.Payment;
        this.Shipment = res.Shipment;
        console.log(res);
      }
    },
    //获取消息历史记录
    async getHistoryList(data) {
      const res = await GroupServesHistory({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        console.log(res.redirect);
      } else if (res.Status == "success") {
        console.log(res);
        this.msgList = res.Data;
        this.ScrollBottom();
      }
    },
    //发送的消息添加到消息记录
    async MessagesFileAdd(data) {
      const res = await GoodsFileAdd({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        console.log(res.redirect);
      } else if (res.Status == "success") {
        console.log(res);
      }
    },
    //websocket
    connectSocketInit() {
      // 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
      this.socketTask = uni.connectSocket({
        url:
          app.globalData.Domain_Socket +
          "/websocket?userId=Group" +
          this.usePhone,
        success(data) {
          console.log("websocket连接成功");
        },
      });
      // // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
      this.socketTask.onOpen((res) => {
        console.log("WebSocket连接正常打开中...！");
        this.is_open_socket = true;
        // 注：只有连接正常打开中 ，才能正常成功发送消息
        this.hearBeatInterval = setInterval(() => {
          this.socketTask.send({
            data: "ping",
          });
        }, 5000);
        // 注：只有连接正常打开中 ，才能正常收到消息
        this.socketTask.onMessage((res) => {
          console.log(JSON.parse(res.data));
          let time = JSON.parse(res.data).data.time;
          let message = JSON.parse(res.data).data.message;
          this.msgList.push({
            botContent: message,
            userContent: "",
            time,
          });
        });
      });
      // // 这里仅是事件监听【如果socket关闭了会执行】
      this.socketTask.onClose(() => {
        this.is_open_socket = false;
        clearInterval(this.hearBeatInterval);
        console.log("已经被关闭了");
      });
    },
    //发送消息
    handleSend() {
      //如果消息不为空
      this.ScrollBottom();
      if (!this.chatMsg || !/^\s+$/.test(this.chatMsg)) {
        let time = times.nowtime();
        let obj = {
          botContent: "",
          userContent: this.chatMsg,
          time: times.nowtime(),
        };
        this.msgList.push(obj);
        if (this.is_open_socket && this.chatMsg != "") {
          console.log(1);
          this.socketTask.send({
            data: JSON.stringify({
              time,
              message: this.chatMsg,
              userId: this.Enterprise_Info_SerialNumber,
            }),
            async success() {
              console.log("消息发送成功");
            },
          });
          let data = {
            Data: JSON.stringify({
              group_serves_news: [
                {
                  Group_Serves_SerialNumber: "",
                  Group_User_Number: uni.getStorageSync("loginInfo").use,
                  Group_Serves_ID: this.form.Enterprise_Info_SerialNumber,
                  Group_Message: this.chatMsg,
                  Group_Message_Time: times.nowtime(),
                  Group_Message_Type: "",
                  Enterprise_Info_SerialNumber:
                    this.form.Enterprise_Info_SerialNumber,
                  Row_Status: "0",
                },
              ],
            }),
          };
          this.MessagesFileAdd(data);
        }
        this.chatMsg = "";
      } else {
        uni.showToast({
          title: "不能发空消息哦",
          icon: "error",
        });
      }
    },
    //滚动到消息底部
    ScrollBottom(i = 0) {
      console.log("滚动了");
      // this.scrollTop = (124-48)*i
      this.$nextTick(() => {
        this.scrollTop = 10000 + i * 10;
      });
    },
    handleServer(boolen) {
      if (uni.getStorageSync("loginInfo") == "") {
        Message({
          type: "warning",
          message: "登录后可享受全部服务",
        });
        let time = setTimeout(() => {
          uni.navigateTo({
            url: "/pages/login/login",
          });
          clearTimeout(time);
        }, 2000);
        return;
      }
      this.isServer = boolen;
      if (boolen) {
        this.connectSocketInit();
        let data = {
          Group_ID: uni.getStorageSync("loginInfo").use,
          User_Type: "custom",
          Enterprise_Info_SerialNumber: this.form.Enterprise_Info_SerialNumber,
        };
        this.getHistoryList(data);
      } else {
        this.closeSocket();
      }
    },
    ChangeTabs(index) {
      this.tabs.forEach((item) => {
        item.isClick = false;
      });
      this.tabs[index].isClick = true;
      this.tabNum = index;
    },
    handleOrder() {
      if (uni.getStorageSync("loginInfo") == "") {
        Message({
          type: "warning",
          message: "登录后可享受全部服务",
        });
        let time = setTimeout(() => {
          uni.navigateTo({
            url: "/pages/login/login",
          });
          clearTimeout(time);
        }, 2000);
        return;
      }
      const loginInfoJSON = localStorage.getItem("loginInfo");
      const loginInfo = JSON.parse(loginInfoJSON);
      const authentication = loginInfo.data.authentication;

      console.log(authentication);
      //购买下单
      if (authentication != "") {
        uni.navigateTo({
          url:
            "/pages/order/supply-order?Goods=" +
            encodeURIComponent(JSON.stringify(this.form)) +
            "&num=" +
            this.Quantity +
            "&data=" +
            encodeURIComponent(JSON.stringify(this.Data)),
        });
      } else {
        uni.showModal({
          title: "平台通知",
          content: "你还没有认证,是否前往认证",
          cancelText: "我再想想",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/index/authorizedShop",
              });
            }
          },
        });
      }
    },
    // handleSizeChange() {

    // },
    // handleCurrentChange() {

    // }
  },
};
</script>

<style lang="scss">
.box {
  box-sizing: border-box;
}

.border-button {
  border-width: 8rpx;
  border-style: solid;
  box-sizing: border-box;
}

.current {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 50rpx;
  right: 25rpx;
  justify-content: space-around;
}

.serve-mask {
  position: fixed;
  right: 0;
  bottom: 90rpx;
  z-index: 1030;
  width: 800rpx;
  height: 40%;
}

.hover:hover {
  cursor: pointer;
}

$chatContentbgc: #c2dcff;
$sendBtnbgc: #4f7df5;

.scroll-view {
  // background-color: orange;
  background-color: #f6f6f6;

  .chat-body {
    display: flex;
    flex-direction: column;
    padding-top: 23rpx;
    // background-color:skyblue;

    .self {
      justify-content: flex-end;
    }

    .item {
      display: flex;
      padding: 23rpx 30rpx;
      // background-color: greenyellow;

      .right {
        background-color: $chatContentbgc;
      }

      .left {
        background-color: #ffffff;
      }

      // 聊天消息的三角形
      .right::after {
        position: absolute;
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        left: 100%;
        top: 10px;
        border: 12rpx solid transparent;
        border-left: 12rpx solid $chatContentbgc;
      }

      .left::after {
        position: absolute;
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        top: 10px;
        right: 100%;
        border: 12rpx solid transparent;
        border-right: 12rpx solid #ffffff;
      }

      .content {
        position: relative;
        max-width: 486rpx;
        border-radius: 8rpx;
        word-wrap: break-word;
        padding: 24rpx 24rpx;
        margin: 0 24rpx;
        border-radius: 5px;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 42rpx;
      }

      .avatar {
        display: flex;
        justify-content: center;
        width: 78rpx;
        height: 78rpx;
        border-radius: 50rpx;
        overflow: hidden;

        image {
          align-self: center;
        }
      }
    }
  }
}

.a::-webkit-scrollbar {
  display: none;
}
</style>